<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中科碳和</title>
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">

    <link rel="stylesheet" th:href="@{/cweb/css/news.css}"/>
    <link rel="stylesheet" th:href="@{/cweb/css/customer-20211209.css}"/>
</head>
<body>

<div class="header">
    <div th:replace="home/cfragments/navbar :: cnavbar"></div>
</div>
<!--子分类-->
<div class="sub-nav">
    <div class="content">
        <a th:each="tag:${bizTags}" th:class="${tag.id==tagId ? 'th-bg' : ''}" href="" th:text="${tag.name}"
           th:href="@{${('/blog/category/' + categoryId + '/' + tag.id )}}"></a>
    </div>
</div>
<div class="news-container">
    <div class="content">
        <ul th:each="article:${articleList}">
            <a th:href="@{${('/blog/article/' + article.id)}}">
                <li>
                    <div class="pho">
                        <img th:src="${article.coverImage}" alt=""/>
                    </div>
                    <div class="title">
                        <h4 th:text="${article.title}"></h4>
                        <div class="title-view">
                            <p class="left" th:text="${article.description}" th:title="${article.description}"></p>
                            <div class="right">
                                <p th:text="${#dates.format(article.updateTime, 'dd')}"></p>
                                <p th:text="${#dates.format(article.updateTime, 'yyyy-MM')}"></p>
                            </div>
                            <div class="cf"></div>
                        </div>
                    </div>
                </li>
            </a>
        </ul>
    </div>
</div>
<!--封装分页组件-->
<div class="page">
    <div class="content">
        <a th:href="@{${pageUrl + '/' + (page.current - 1)}}" th:if="${page.current != 1 && page.pages != 0}">&lt;</a>
        <a href="javascript:void(0);" th:if="${page.current == 1 || page.pages == 0}">&lt;</a>

        <a th:each="item:${items}" th:class="${page.current==item ? 'th-bg' : ''}" th:href="@{${pageUrl + '/' + item}}" th:text="${item}"></a>

        <a th:href="@{${pageUrl + '/' + (page.current + 1)}}" th:if="${page.current != page.pages && page.pages != 0}">&gt;</a>
        <a href="javascript:void(0);" th:if="${page.current == page.pages || page.pages == 0}">&gt;</a>
    </div>
</div>
<div class="footer">
    <div th:replace="home/cfragments/footer :: cfooter"></div>
</div>
<script>
    $(function () {
        animat();

        function animat() {
            var sc = $(window).scrollTop();
            var a = $(window).height();
            var li = $('.news-container .content ul li');
            li.each(function () {
                var _vm = $(this);
                var l_h = _vm.offset().top - 300;
                if (sc + a > l_h) {
                    _vm.addClass('animate')

                }
            })
        }

        $(window).scroll(function () {
            animat();
        })
    })
</script>
<script>
    $(function () {
        $(".news-container .content ul li .pho").each(function () {
            $(this).bind("mouseenter mouseleave",
                function (e) {
                    var more = $(this).find('.more');
                    var w = $(this).width();
                    var h = $(this).height();

                    var x = (e.pageX - $(this).offset().left - (w / 2)) * (w > h ? (h / w) : 1);
                    var y = (e.pageY - $(this).offset().top - (h / 2)) * (h > w ? (w / h) : 1);
                    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

                    var eventType = e.type;

                    if (e.type == 'mouseenter') {
                        mouseIN(direction, more);
                    } else {
                        mouseOut(direction, more);
                    }
                });

            function mouseIN(direction, ele) {

                switch (direction) {
                    //上方
                    case 0:
                        ele.css({
                            top: "-100%",
                            left: 0
                        }).animate({
                            top: 0

                        }, 200);
                        break;
                    //右
                    case 1:
                        ele.css({
                            top: 0,
                            left: '100%'
                        }).animate({
                            left: 0

                        }, 200);
                        break;
                    //下
                    case 2:
                        ele.css({
                            top: "100%",
                            left: 0
                        }).animate({
                            top: 0

                        }, 200);
                        break;
                    //左
                    case 3:
                        ele.css({
                            top: 0,
                            left: '-100%'
                        }).animate({
                            left: 0

                        }, 200);
                        break;
                }
            };

            function mouseOut(direction, ele) {
                switch (direction) {
                    case 0:
                        ele.animate({
                            top: '-100%'
                        }, 200)
                        break;
                    case 1:
                        ele.animate({
                            left: '100%'
                        }, 200);
                        break;
                    case 2:
                        ele.animate({
                            top: '100%'
                        }, 200);
                        break;
                    case 3:
                        ele.animate({
                            left: '-100%'
                        }, 200)
                        break;
                }
            }
        })
    })

</script>
</body>
</html>
